/* ----- header ----- */
@import url(http://fonts.googleapis.com/css?family=Roboto:400);

body {
  height: 100%;
  width: 100%;
  font-family: 'Roboto', sans-serif;
  background: #333;
  margin: 0;
  padding: 0;
  -webkit-user-select: none;
}

.c-container {
  width: 787px;
  margin: 100px auto;
}

.c-xypad {
  width: 767px;
  height: 400px;
  background: #9E9E9E;
  border-radius: 5px;
  box-shadow: inset 0 0 4px #fff, 0 0 10px #000;
  z-index: 10;
}

.c-viz {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 0;
  margin: 0;
  z-index: 0;
  pointer-events: none;
}

.c-up {
  top: 10px;
  left: 290px;
}

.c-left {
  top: 169px;
  left: -82px;
  -webkit-transform: rotate(-90deg);
}

.c-right {
  top: 162px;
  left: 647px;
  -webkit-transform: rotate(90deg);
}

.c-down {
  top: 324px;
  left: 290px;
}

.c-instruction {
  color: #ccc;
  font-size: 12px;
  letter-spacing: 1px;
  margin-bottom: 8px;
  text-align: center;
}

.c-embossed {
  position: relative;
  font-size: 12px;
  color: #6F6F6F;
  text-shadow: 1px 1px 2px #E6E6E6;
  letter-spacing: 3px;
  width: 200px;
  text-align: center;
}